import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { HomeWarpper } from './style'
import HomeBanner from './c-cpns/home-banner'
import { fetchHomeData } from '@/store/modules/home'
import HomeSelectionV1 from './c-cpns/home-selection-v1'
import HomeSelectionV2 from './c-cpns/home-selection-v2'
import { isEmptyO } from '@/utils'
import HomeLongFor from './c-cpns/home-longfor'
import HomeSelectionV3 from './c-cpns/home-selection-v3'
import { changeHeaderConfigAction } from '@/store/modules/main'

const Home = memo((props) => {
  // 数据
  const { goodPriceData, highScoreData, discountData, hotRecommendData, longForData, plusData } = useSelector((state) => ({
    goodPriceData: state.home.goodPriceData,
    highScoreData: state.home.highScoreData,
    discountData: state.home.discountData,
    hotRecommendData: state.home.hotRecommendData,
    longForData: state.home.longForData,
    plusData: state.home.plusData,
  }), shallowEqual)

  // 派发事件,发送网络请求
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchHomeData())
    dispatch(changeHeaderConfigAction({ isFixed: true, topAlpha: true }))
  }, [dispatch])

  return (
    <HomeWarpper>
      <HomeBanner />
      <div className="content">
        {isEmptyO(discountData) && <HomeSelectionV2 infoData={discountData} />}
        {isEmptyO(hotRecommendData) && <HomeSelectionV2 infoData={hotRecommendData} />}

        {isEmptyO(longForData) && <HomeLongFor infoData={longForData}/>}

        {isEmptyO(goodPriceData) && <HomeSelectionV1 infoData={goodPriceData} />}
        {isEmptyO(highScoreData) && <HomeSelectionV1 infoData={highScoreData} />}

        {isEmptyO(plusData) && <HomeSelectionV3 infoData={plusData} />}
      </div>
    </HomeWarpper>
  )
})

export default Home